<template>
  <div class="ranking-menu">
    <!-- 说明信息 -->
    <n-card size="small" class="info-card">
      <template #header>
        <n-space align="center" :size="8">
          <n-icon :size="16">
            <InformationCircleOutline />
          </n-icon>
          <n-text strong>说明</n-text>
        </n-space>
      </template>

      <n-space vertical :size="8">
        <n-text :depth="3" style="font-size: 12px;">
          • 数据每小时更新一次
        </n-text>
        <n-text :depth="3" style="font-size: 12px;">
          • 价格单位为哈夫币
        </n-text>
        <n-text :depth="3" style="font-size: 12px;">
          • 仅供参考，以游戏内为准
        </n-text>
      </n-space>
    </n-card>
    <!-- 排行榜菜单 -->
    <div class="ranking-categories">
      <div class="menu-group">
        <div class="group-title">
          <n-text strong :depth="2">排行榜</n-text>
        </div>

        <div class="group-items">
          <div
            v-for="menuItem in rankingMenuItems"
            :key="menuItem.key"
            :class="['menu-item', { active: currentView === menuItem.key }]"
            @click="handleMenuClick(menuItem.key)"
          >
            <div class="item-icon" :style="{ color: menuItem.iconColor }">
              <n-icon :size="20">
                <component :is="menuItem.icon" />
              </n-icon>
            </div>

            <div class="item-content">
              <div class="item-label">{{ menuItem.label }}</div>
              <div class="item-description">{{ menuItem.description }}</div>
            </div>

            <div v-if="currentView === menuItem.key" class="active-indicator">
              <n-icon :size="16" color="#18a058">
                <CheckmarkOutline />
              </n-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    
  </div>
</template>

<script setup lang="ts">
import {
  CheckmarkOutline,
  InformationCircleOutline
} from '@vicons/ionicons5'
import { rankingMenuItems } from '@/config/rankingMenuConfig'

// Props
const props = defineProps<{
  currentView?: string
}>()

// Emits
const emit = defineEmits<{
  'menu-click': [menuKey: string]
}>()

// 处理菜单点击
const handleMenuClick = (menuKey: string) => {
  emit('menu-click', menuKey)
}
</script>

<style scoped>
.ranking-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  /* 确保菜单适应父容器的固定宽度(240px) */
}

.ranking-categories {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-title {
  padding: 8px 12px;
  background: var(--n-card-color);
  border-radius: 6px;
  border: 1px solid var(--n-border-color);
}

.group-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: var(--n-card-color);
}

.menu-item:hover {
  background: var(--n-hover-color);
  border-color: var(--n-border-color);
}

.menu-item.active {
  background: var(--n-primary-color-suppl);
  border-color: var(--n-primary-color);
  box-shadow: 0 2px 8px rgba(24, 160, 88, 0.15);
}

.item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* 允许文本换行 */
}

.item-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--n-text-color);
}

.item-description {
  font-size: 12px;
  color: var(--n-text-color-3);
  line-height: 1.4;
  word-wrap: break-word;
  /* 确保长文本能够正确换行 */
}

.active-indicator {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-card {
  border: 1px solid var(--n-border-color);
  background: var(--n-card-color);
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .item-icon {
    background: rgba(255, 255, 255, 0.05);
  }
}
</style>
